<main class="container">
    <div class="intro">
        <div class="title">
            <h1>The best system design tool.</h1>
            <h3>Systemizer provides system visualization with customizable components</h3>
            <p class="caption-dark fs-6">Are you new to design tools? This <a class="highlight" routerLink="getting-started">quick introduction</a> is just for you!</p>
        </div>
        <div class="animation components components-intro">
            <svg>
                <linearGradient id="linear-1" x1="0" y1="0" x2="100%" y2="0">
                    <stop offset="0%"   stop-color="#0EC35B"/>
                    <stop offset="100%" stop-color="#021B79"/>
                </linearGradient>
                <linearGradient id="linear-2" x1="0" y1="0" x2="100%" y2="0">
                    <stop offset="0%"   stop-color="#021B79"/>
                    <stop offset="100%" stop-color="#4CA1AF"/>
                </linearGradient>
                <linearGradient id="linear-3" x1="0" y1="0" x2="100%" y2="0">
                    <stop offset="0%"   stop-color="#021B79"/>
                    <stop offset="100%" stop-color="#4CA1AF"/>
                </linearGradient>
                <linearGradient id="linear-4" x1="0" y1="0" x2="100%" y2="0">
                    <stop offset="0%"   stop-color="#021B79"/>
                    <stop offset="100%" stop-color="#4CA1AF"/>
                </linearGradient>
                <path stroke="url(#linear-1)" #mainPath d="M120.1 105.1 L80 105"></path>
                <path stroke="url(#linear-2)" #mainPath d="M250.1 30.1 L205 105"></path>
                <path stroke="url(#linear-3)" #mainPath d="M250.1 180.1 L205 105"></path>
                <path stroke="url(#linear-4)" #mainPath d="M250.1 105.1 L200 105"></path>
                <circle id="anim-data" cx="80" cy="105" r="5" fill="#31B78D"></circle>
            </svg>
            <div class="component-body" style="background-color: #0EC35B;">
                <img src="./assets/client.svg" alt="Client visualization">
                <div style="border-color: #0EC35B;" class="port right"></div>
            </div>
            <div class="component-body" style="margin-left: 4em; background-color: #021B79;">
                <img src="./assets/loadbalancer.svg" alt="Load Balancer visualization">
                <div style="border-color: #021B79;" class="port left"></div>
                <div style="border-color: #021B79;" class="port right"></div>
            </div>
            <div style="margin-left: 4em; margin-top: -4em;">
                <div class="component-body" style="background-color: #4CA1AF;">
                    <img src="./assets/api.svg" alt="API visualization">
                    <div style="border-color: #4CA1AF;" class="port left"></div>
                </div>
                <div class="component-body" style="margin-top: 1em; background-color: #4CA1AF;">
                    <img src="./assets/api.svg" alt="API visualization">
                    <div style="border-color: #4CA1AF;" class="port left"></div>
                </div>
                <div class="component-body" style="margin-top: 1em; background-color: #4CA1AF;">
                    <img src="./assets/api.svg" alt="API visualization">
                    <div style="border-color: #4CA1AF;" class="port left"></div>
                </div>
            </div>
        </div>
    </div>
    <div class="animation-board-container">
        <svg viewBox="0 0 500 300" xmlns="http://www.w3.org/2000/svg" class="animation-board" >
            <g class="menu">
                <rect x="0" y="0" width="200" height="300" class="main"></rect>
                <g class="client">
                    <rect x="2" y="2" width="197" height="30" class="section"></rect>
                    <text x="10" y="20">Client-side</text>
                    <g class="content">
                        <rect x="0" y="0" rx="5" ry="5" width="40" height="40" fill="#0EC35B"></rect>
                        <image height="26" width="26" xlink:href="https://honzaap.github.io/Systemizer/assets/client.svg" x="7" y="7" visibility="visible"></image>
                    </g>
                </g>
                <g class="server">
                    <rect x="2" y="0" width="197" height="30" class="section"></rect>
                    <text x="10" y="20">Server-side</text>
                    <g class="content">
                        <rect x="0" y="0" rx="5" ry="5" width="40" height="40" fill="#009FFF"></rect>
                        <image height="26" width="26" xlink:href="https://honzaap.github.io/Systemizer/assets/webserver.svg" x="7" y="7" visibility="visible"></image>
                        <rect x="45" y="0" rx="5" ry="5" width="40" height="40" fill="#2C5364"></rect>
                        <image height="26" width="26" xlink:href="https://honzaap.github.io/Systemizer/assets/apigateway.svg" x="52" y="7" visibility="visible"></image>
                        <rect x="90" y="0" rx="5" ry="5" width="40" height="40" fill="#4CA1AF"></rect>
                        <image height="26" width="26" xlink:href="https://honzaap.github.io/Systemizer/assets/api.svg" x="97" y="7" visibility="visible"></image>
                    </g>
                </g>
            </g>
            <line class="connection drag" x1="316" y1="105" x2="369" y2="105"></line>
            <line class="connection full" x1="316.1" y1="105.1" x2="369" y2="105" stroke="url(#linear-grad-anim)"></line>
            <g class="comp-client" style="transform: translate(200px, 200px)">
                <rect x="0" y="0" rx="5" ry="5" width="40" height="40" fill="#0EC35B"></rect>
                <image height="26" width="26" xlink:href="https://honzaap.github.io/Systemizer/assets/client.svg" x="7" y="7" visibility="visible"></image>
                <circle r="6.5" class="port" cx="50" cy="20" stroke="#0EC35B"></circle>
            </g>
            <g class="comp-api" style="transform: translate(250px, 250px)">
                <rect x="0" y="0" rx="5" ry="5" width="40" height="40" fill="#4CA1AF"></rect>
                <image height="26" width="26" xlink:href="https://honzaap.github.io/Systemizer/assets/api.svg" x="7" y="7" visibility="visible"></image>
                <circle r="6.5" class="port" cx="-10" cy="20" stroke="#4CA1AF"></circle>
            </g>
            <g class="cursor normal">
                <foreignObject height="30" width="30"><i class="fas fa-mouse-pointer"></i></foreignObject>
            </g>
            <g class="cursor pointer">
                <foreignObject height="30" width="30"><i class="fas fa-hand-pointer"></i></foreignObject>
            </g>
            <linearGradient id="linear-grad-anim" x1="0" y1="0" x2="100%" y2="0">
                <stop offset="0%"   stop-color="#0EC35B"/>
                <stop offset="100%" stop-color="#4CA1AF"/>
            </linearGradient>
        </svg>
    </div>
    <div class="components">
        <div class="components-showcase">
            <div class="component-container">
                <span class="title">Client</span>
                <div style="background-color: #0EC35B;" class="component-body">
                    <img src="./assets/client.svg" alt="Client visualization">
                    <div style="border-color: #0EC35B;" class="port right"></div>
                </div>
            </div>

            <div class="component-container">
                <span class="title">Web Server</span>
                <div style="border: 2px solid #009FFF; background-color: transparent;" class="component-body">
                    <span style="background-color: #009FFF; border-color: #009FFF;" class="img bg-webserver"></span>
                    <div style="border-color: #009FFF;" class="port left"></div>
                </div>
            </div>

            <div class="component-container">
                <span class="title">Load Balancer</span>
                <div style="background-color: #021B79;" class="component-body">
                    <img src="./assets/loadbalancer.svg" alt="Load Balancer visualization">
                    <div style="border-color: #021B79;" class="port left"></div>
                    <div style="border-color: #021B79;" class="port right"></div>
                </div>
            </div>

            <div class="component-container">
                <span class="title">API Gateway</span>
                <div style="background-color: #2C5364;" class="component-body high">
                    <img src="./assets/apigateway.svg" alt="API Gateway visualization">
                    <div style="border-color: #2C5364;" class="port left"></div>
                    <div style="border-color: #2C5364;" class="port right"></div>
                </div>
            </div>

            <div class="component-container">
                <span class="title">API Service</span>
                <div style="background-color: #4CA1AF;" class="component-body">
                    <img src="./assets/api.svg" alt="API visualization">
                    <div style="border-color: #4CA1AF;" class="port left"></div>
                    <div style="border-color: #4CA1AF;" class="port right"></div>
                </div>
            </div>

            <div class="component-container">
                <span class="title">Pub/Sub Model</span>
                <div style="background-color: #FF7D35;" class="component-body">
                    <img src="./assets/pubsub.svg" alt="Publisher Subscriber visualization">
                    <div style="border-color: #FF7D35;" class="port left"></div>
                    <div style="border-color: #FF7D35;" class="port right"></div>
                </div>
            </div>

            <div class="component-container">
                <span class="title">Database</span>
                <div style="background-color: #E94057;" class="component-body">
                    <img src="./assets/database.svg" alt="Database visualization">
                    <div style="border-color: #E94057;" class="port left"></div>
                    <div style="border-color: #E94057;" class="port right"></div>
                </div>
            </div>

            <div class="component-container">
                <span class="title">Cache</span>
                <div style="background-color: #b21f1f;" class="component-body">
                    <img src="./assets/cache.svg" alt="Cache visualization">
                    <div style="border-color: #b21f1f;" class="port left"></div>
                    <div style="border-color: #b21f1f;" class="port right"></div>
                </div>
            </div>

            <div class="component-container">
                <span class="title">Message Queue</span>
                <div style="border: 2px solid #F2994A; background-color: transparent;" class="component-body long mq">
                    <div class="cell"></div>
                    <div class="cell"></div>
                    <div class="cell"></div>
                    <div class="cell"></div>
                    <div class="cell"></div>
                    <div class="cell"></div>
                    <div class="cell"></div>
                    <div class="cell"></div>
                    <div class="cell"></div>
                    <div class="cell"></div>
                    <div style="border-color: #F2994A;" class="port left"></div>
                    <div style="border-color: #F2994A;" class="port right"></div>
                </div>
            </div>
        </div>
        <div>
            <h2 class="fs-3">Create and visualize your backend system</h2>
            <p class="caption-dark fs-5">Many different components with customizable properties and more to come.</p>
        </div>
    </div>
    <div class="get-started">
        <a class="btn-main" routerLink="create">Get started</a>
    </div>
    <div class="open-source text-center">
        <h3>Open source & Open to contributions!</h3>
        <div class="mt-1">
            <a href="https://github.com/honzaap/Systemizer">
                <img alt="GitHub contributors" src="https://img.shields.io/github/contributors/honzaap/Systemizer?color=df9300&label=Contributors&style=flat-square">
                <img alt="GitHub issues" src="https://img.shields.io/github/issues-raw/honzaap/Systemizer?color=7767d4&label=Open%20issues&style=flat-square">
                <img alt="GitHub forks" src="https://img.shields.io/github/forks/honzaap/Systemizer?color=080a1a&label=Fork%20us&style=flat-square">
                <img alt="GitHub Repo stars" src="https://img.shields.io/github/stars/honzaap/Systemizer?color=9278ff&label=Star%20us&style=flat-square">
            </a>
        </div>
    </div>
</main>